<template>
<!-- 首页 -->
  <div class="container">
    <!-- 1. 左侧分类 -->
    <HomeCate />
    <!-- 2. 轮播图 -->
    <HomeBanner />
    <!-- 3. 新鲜好物 -->
    <HomeNew />
    <!-- 4. 人气推荐 -->
    <HomeHot />
    <!-- 5. 楼层组件 -->
    <HomeProduct />
  </div>
</template>

<script>
import HomeCate from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeProduct from './components/home-product.vue'

export default {
  components: {
    HomeCate,
    HomeBanner,
    HomeNew,
    HomeHot,
    HomeProduct
  },
  setup () {
    return { }
  }
}
</script>

<style lang="less" scoped>
/**
 * 说明:
 * 1. vue2 使用 @ 符号需要在前边加个 ~
 * 2. vue3 不要加 ~
 */
// 手动导入
// @import '@/styles/var.less'; // 可以复用
// @priceColor: red; // 不能复用
.test {
  color: @sucColor;
  border: 2px solid @priceColor;
}
</style>
